<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>AdminSJ</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.css"/>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"/>
    <!-- Theme style -->
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.min.css"/>
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css"/>

    <style>
        .content-wrapper, .right-side {
            background-color: rgb(255, 255, 255);
        }

        .content {
            padding: 0 15px;
        }

        .content-header {
        }

        /*添加选中效果*/
        .skin-blue .treeview-menu > li.menu_click > a, .skin-blue .treeview-menu > li.menu_click > a {
            color: #FFF
        }
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <header class="main-header">
        <!-- Logo -->
        <a href="/" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>S</b>J</span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>Admin</b>SJ</span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>

            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">

                    <!-- User Account: style can be found in dropdown.less -->
                    <li class="dropdown user user-menu vue-container" id="user-info">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img :src="userInfo.avater" class="user-image" :alt="userInfo.name"/>
                            <span class="hidden-xs">{{userInfo.name}}</span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- User image -->
                            <li class="user-header">
                                <img :src="userInfo.avater" class="img-circle" :alt="userInfo.name"/>

                                <p>
                                    {{userInfo.name}}
                                </p>
                            </li>
                            <!-- Menu Body -->
                            <li class="user-body">
                                <div class="row">
                                    <div class="col-xs-12 text-center">
                                        {{userInfo.description}}
                                    </div>
                                </div>
                                <!-- /.row -->
                            </li>
                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-left">
                                    <a href="#" class="btn btn-default btn-flat">个人信息</a>
                                </div>
                                <div class="pull-right">
                                    <a href="/logout" class="btn btn-default btn-flat">退出</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <div class="vue-container" id="app">
        <!-- Left side column. contains the logo and sidebar -->
        <aside class="main-sidebar">
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
                <!-- Sidebar user panel -->
                <div class="user-panel">
                    <div class="pull-left image">
                        <img :src="userInfo.avater" class="img-circle" alt="User Image"/>
                    </div>
                    <div class="pull-left info">
                        <p>{{userInfo.name}}</p>
                        <a href="/logout" title="点击退出登录"><i class="fa fa-circle text-success"></i> 在线</a>
                    </div>
                </div>
                <!-- search form -->
                <form action="#" method="get" class="sidebar-form">
                    <div class="input-group">
                        <input type="text" name="q" class="form-control" placeholder="搜索菜单..."/>
                        <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
                    </div>
                </form>
                <!-- /.search form -->
                <!-- sidebar menu: : style can be found in sidebar.less -->
                <ul class="sidebar-menu">
                    <li class="header">主导航</li>
                    <!--<li v-for="menu in menus" class=" treeview">
                        <a href="#">
                            <i :class="menu.icon==null?'fa fa-folder':menu.icon"></i> <span>{{menu.name}}</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                             </span>
                        </a>
                        <ul class="treeview-menu">
                            <li v-for="m in menu.menuTrees" v-on:click="setMenuClick(m.id)"
                                v-bind:class="{menu_click:m.id==menu_click}"><a :href="'/#'+m.url"><i
                                    :class="m.icon==null?'fa fa-circle-o':m.icon"></i> {{m.name}}</a>
                            </li>
                        </ul>

                    </li>-->
                    <li v-for="menu in menus" class="treeview">
                        <a href="#">
                            <i :class="menu.icon==null?'fa fa-folder':menu.icon"></i> <span>{{menu.name}}</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                             </span>
                        </a>
                        <ul class="treeview-menu">
                            <li v-for="m in menu.menuTrees"
                                v-bind:class="{menu_click:m.id==menu_click}">
                                <a v-if="m.menuTrees==null" :href="'/#'+m.url" v-on:click="setMenuClick(m.id)">
                                    <i :class="m.icon==null?'fa fa-circle-o':m.icon"></i> {{m.name}}
                                </a>
                                <a v-if="m.menuTrees!=null" href="#">
                                    <i :class="m.icon==null?'fa fa-circle-o':m.icon"></i>
                                    {{m.name}}
                                    <span class="pull-right-container">
                                        <i class="fa fa-angle-left pull-right"></i>
                                    </span>
                                </a>
                                <ul v-if="m.menuTrees!=null" class="treeview-menu">
                                    <li v-for="c in m.menuTrees"
                                        v-bind:class="{menu_click:c.id==menu_click}">
                                        <a  :href="'/#'+c.url" v-on:click="setMenuClick(c.id)">
                                            <i :class="c.icon==null?'fa fa-circle-o':c.icon"></i> {{c.name}}
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="header">LABELS</li>
                </ul>
            </section>
            <!-- /.sidebar -->
        </aside>

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">

            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>

                    <small>{{pageHeader}}</small>
                </h1>
                <ol class="breadcrumb">
                    <li><a href="/"><i class="fa fa-dashboard"></i> 首页</a></li>
                    <li class="active">{{pageHeader}}</li>
                </ol>
            </section>

            <!-- Main content -->
            <section class="content">
                <!-- Small boxes (Stat box) -->
                <iframe id="content-iframe" class=" frame" frameborder="0"
                        width="100%" v-model="frame_src" :src="frame_src"></iframe>
                <!-- right col -->
                <!-- /.row (main row) -->
            </section>

            <!-- /.content -->
        </div>
    </div>
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> beta 0.2
        </div>
        <strong>Copyright &copy; 2014-2016 SanJi </strong> All rights
        reserved.
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
            <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
            <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- Home tab content -->
            <div class="tab-pane" id="control-sidebar-home-tab">
                home
            </div>
            <!-- /.tab-pane -->
            <!-- Stats tab content -->
            <div class="tab-pane" id="control-sidebar-stats-tab">工具</div>
            <!-- /.tab-pane -->
            <!-- Settings tab content -->
            <div class="tab-pane" id="control-sidebar-settings-tab">
                设置
            </div>
            <!-- /.tab-pane -->
        </div>
    </aside>
    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>

<script src="plugins/director/director.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="plugins/adminLTE/js/app.min.js"></script>
<!-- AdminLTE for demo purposes 汉化-->
<script src="plugins/adminLTE/js/demo.js"></script>
<!--vue-->
<script src="/plugins/vue/vue.min.js"></script>
<!--首页-->
<script src="/dists/js/index.js">
</script>
</body>
</html>
